<template>
  <transition name="notification">
    <div 
      v-if="visible" 
      class="floating-notification"
      :class="[`notification-${type}`]"
    >
      <div class="notification-icon">
        <i :class="iconType"></i>
      </div>
      <div class="notification-content">
        <div v-if="title" class="notification-title">{{ title }}</div>
        <div class="notification-message">{{ message }}</div>
      </div>
      <div class="notification-close" @click="close">
        <i class="el-icon-close"></i>
      </div>
      <div 
        v-if="duration > 0" 
        class="notification-progress"
      >
        <div 
          class="progress-inner"
          :style="{ animationDuration: `${duration}ms` }"
        ></div>
      </div>
    </div>
  </transition>
</template>

<script>
import { ref, computed, onMounted } from 'vue'

export default {
  name: 'FloatingNotification',
  props: {
    title: {
      type: String,
      default: ''
    },
    message: {
      type: String,
      required: true
    },
    type: {
      type: String,
      default: 'info',
      validator: (value) => ['success', 'warning', 'error', 'info'].includes(value)
    },
    duration: {
      type: Number,
      default: 4500 // 4.5秒后自动关闭，设置为0则不自动关闭
    },
    onClose: {
      type: Function,
      default: () => {}
    }
  },
  setup(props, { emit }) {
    const visible = ref(true)
    let timer = null
    
    // 根据通知类型确定图标
    const iconType = computed(() => {
      switch(props.type) {
        case 'success': return 'el-icon-check';
        case 'warning': return 'el-icon-warning';
        case 'error': return 'el-icon-close';
        default: return 'el-icon-info';
      }
    })
    
    // 关闭通知
    const close = () => {
      visible.value = false
      if (timer) {
        clearTimeout(timer)
      }
      
      // 执行关闭回调
      if (typeof props.onClose === 'function') {
        props.onClose()
      }
      
      // 触发关闭事件
      emit('close')
    }
    
    // 点击内容
    const handleClick = () => {
      emit('click')
    }
    
    // 设置自动关闭计时器
    onMounted(() => {
      if (props.duration > 0) {
        timer = setTimeout(() => {
          close()
        }, props.duration)
      }
    })
    
    return {
      visible,
      iconType,
      close,
      handleClick
    }
  }
}
</script>

<style scoped>
/* 通知容器 */
.floating-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 350px;
  min-height: 70px;
  padding: 16px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  z-index: 9999;
  overflow: hidden;
  animation: slide-in 0.3s ease-out;
}

/* 不同类型的通知样式 */
.notification-success {
  border-left: 4px solid #52c41a;
}

.notification-warning {
  border-left: 4px solid #faad14;
}

.notification-error {
  border-left: 4px solid #f5222d;
}

.notification-info {
  border-left: 4px solid #1890ff;
}

/* 图标样式 */
.notification-icon {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 16px;
  font-size: 22px;
}

.notification-success .notification-icon {
  color: #52c41a;
}

.notification-warning .notification-icon {
  color: #faad14;
}

.notification-error .notification-icon {
  color: #f5222d;
}

.notification-info .notification-icon {
  color: #1890ff;
}

/* 内容样式 */
.notification-content {
  flex: 1;
  overflow: hidden;
}

.notification-title {
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 16px;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-message {
  font-size: 14px;
  line-height: 1.5;
  color: #606266;
  word-wrap: break-word;
}

/* 关闭按钮 */
.notification-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  font-size: 16px;
  color: #909399;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.notification-close:hover {
  opacity: 1;
}

/* 进度条 */
.notification-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.progress-inner {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #1890ff, #52c41a);
  transform: translateX(0);
  animation-name: progress;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.notification-success .progress-inner {
  background: linear-gradient(90deg, #b7eb8f, #52c41a);
}

.notification-warning .progress-inner {
  background: linear-gradient(90deg, #ffe58f, #faad14);
}

.notification-error .progress-inner {
  background: linear-gradient(90deg, #ffccc7, #f5222d);
}

.notification-info .progress-inner {
  background: linear-gradient(90deg, #91d5ff, #1890ff);
}

/* 动画效果 */
@keyframes slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes progress {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.notification-enter-active {
  animation: slide-in 0.3s ease-out;
}

.notification-leave-active {
  animation: slide-in 0.3s ease-out reverse;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .floating-notification {
    width: calc(100% - 40px);
    max-width: 350px;
  }
}
</style> 